<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="UTF-8" import="java.util.ArrayList,cn.just.food.entity.FoodInfo"
%>
    
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 使用最新的IE渲染模式 -->
		<title>中国八大菜系主页</title>
		<link rel="stylesheet" type="text/css" href="css/home.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</head>

	<body>
		<!-- 顶部导航条 -->
		<div class="header" id="header">
			<div class="header-icon">

			</div>
			<div class="header-pick">
				<ul>
					<li>
						<a href="home">主页</a>
					</li>
					<li id="user">
						欢迎您：${user.nickname}
					</li>
				</ul>
			</div>
			<div class="header-option">
				<ul>
					<li>
						<a href="register.jsp">注册</a>
					</li>
					<li>
						<a href="login">登录</a>
					</li>
				</ul>
			</div>
		</div>

		<!-- 主体 -->
		<div class="mainbox">
			<!-- 头部小导航条 -->
			<div class="direction">
				<div class="main-dir">
					<ul>
						<li>
							<a href="home">首页</a>
						</li>
						<li>
							<a href="culture.html">文化</a>
						</li>
					</ul>
					<div class="search">
						<input type="text" name="soucai" id="soucai" placeholder="请输入搜索的菜品名称..." />
						<a href="load?name=辣椒炒肉" id="anniu"><button>搜索</button></a>							
					</div>
				</div>
			</div>

			<!-- 轮播图 -->
			<div class="slideshow">
				<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
					<!-- 小圆点 -->
					<ol class="carousel-indicators">
						<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
						<li data-target="#carousel-example-generic" data-slide-to="1"></li>
						<li data-target="#carousel-example-generic" data-slide-to="2"></li>
						<li data-target="#carousel-example-generic" data-slide-to="3"></li>
						<li data-target="#carousel-example-generic" data-slide-to="4"></li>
					</ol>

					<!-- 轮播图主体部分 -->
					<div class="carousel-inner" role="listbox">
						<div class="item active">
							<img src="img/2.jpg" alt="图片1" />
						</div>
						<div class="item">
							<img src="img/3.jpg" alt="图片2" />
						</div>
						<div class="item">
							<img src="img/4.jpg" alt="图片3" />
						</div>
						<div class="item">
							<img src="img/5.jpg" alt="图片3" />
						</div>
						<div class="item">
							<img src="img/7.jpg" alt="图片3" />
						</div>
					</div>

					<!-- 左右切换按钮 -->
					<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span class="sr-only">prev</span>
					</a>
					<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span class="sr-only">next</span>
					</a>
				</div>
			</div>

			<!-- 菜品展示 -->
			<div class="foodshow">
				<div class="foodhead">
					<ul>
						<li>
							<button id="btnyue">粤菜</button>
						</li>
						<li>
							<button id="btnchuan">川菜</button>
						</li>
						<li>
							<button id="btnxiang">湘菜</button>
						</li>
						<li>
							<button id="btnhui">徽菜</button>
						</li>
						<li>
							<button id="btnsu">苏菜</button>
						</li>
						<li>
							<button id="btnzhe">浙菜</button>
						</li>
						<li>
							<button id="btnlu">鲁菜</button>
						</li>
						<li>
							<button id="btnmin">闽菜</button>
						</li>
					</ul>
				</div>
				<div class="fooddisplay">
					<div class="dvyue" id="dvyue" style="display: block;">
						<ul class="pics">
							<c:forEach items="${allfoods}" var="food" begin="0" end="3">
								<li style="background-image: url('${food.img}');background-size: 100%"></li>
							</c:forEach> 
						</ul>												
						<ul class="txts">
							<li>
								<a href="load?name=肠粉">肠粉</a>
							</li>
							<li>
								<a href="load?name=腊味煲仔饭">腊味煲仔饭</a>
							</li>
							<li>
								<a href="load?name=云吞面">云吞面</a>
							</li>
							<li>
								<a href="load?name=生滚粥">生滚粥</a>
							</li>
						</ul>												
						<ul class="pics">
							<c:forEach items="${allfoods}" var="food" begin="4" end="7">
								<li style="background-image: url('${food.img}');background-size: 100%"></li>
							</c:forEach> 
						</ul>												
						<ul class="txts"> 
							<li>
								<a href="load?name=叉烧">叉烧</a>
							</li>
							<li>
								<a href="load?name=白切鸡">白切鸡</a>
							</li>
							<li>
								<a href="load?name=老火靓汤">老火靓汤</a>
							</li>
							<li>
								<a href="load?name=干炒牛河">干炒牛河</a>
							</li>                														
						</ul>
					</div>
					
					<div class="dvchuan" id="dvchuan" style="display: none;">
						<ul class="pics">
							<c:forEach items="${allfoods}" var="food" begin="8" end="11">
								<li style="background-image: url('${food.img}');background-size: 100%"></li>
							</c:forEach> 
						</ul>												
						<ul class="txts"> 
							<li>
								<a href="#">火锅</a>
							</li>
							<li>
								<a href="load?name=冰粉">冰粉</a>
							</li>
							<li>
								<a href="#">抄手</a>
							</li>
							<li>
								<a href="#">担担面</a>
							</li>                														
						</ul>												
						<ul class="pics">
							<c:forEach items="${allfoods}" var="food" begin="12" end="15">
								<li style="background-image: url('${food.img}');background-size: 100%"></li>
							</c:forEach> 
						</ul>												
						<ul class="txts"> 
							<li>
								<a href="#">夫妻肺片</a>
							</li>
							<li>
								<a href="#">冷锅串串</a>
							</li>
							<li>
								<a href="#">麻婆豆腐</a>
							</li>
							<li>
								<a href="#">三大炮</a>
							</li>                														
						</ul>
					</div>
					<div id="dvxiang" style="display: none;">
						<ul class="pics">
							<c:forEach items="${allfoods}" var="food" begin="16" end="19">
								<li style="background-image: url('${food.img}');background-size: 100%"></li>
							</c:forEach> 
						</ul>												
						<ul class="txts"> 
							<li>
								<a href="load?name=辣椒炒肉">辣椒炒肉</a>
							</li>
							<li>
								<a href="#">湘西外婆菜</a>
							</li>
							<li>
								<a href="#">酱板鸭</a>
							</li>
							<li>
								<a href="#">小炒驴肉</a>
							</li>                														
						</ul>												
						<ul class="pics">
							<c:forEach items="${allfoods}" var="food" begin="20" end="23">
								<li style="background-image: url('${food.img}');background-size: 100%"></li>
							</c:forEach> 
						</ul>												
						<ul class="txts"> 
							<c:forEach items="${allfoods}" var="food" begin="20" end="23">      
       							<li>      
        							<a>${food.name}</a>    <!--url为obj的一个属性-->  
       							</li>
       						</c:forEach>                														
						</ul>
					</div>
					<div id="dvhui" style="display: none;">
						<ul class="pics">
							<c:forEach items="${allfoods}" var="food" begin="24" end="27">
								<li style="background-image: url('${food.img}');background-size: 100%"></li>
							</c:forEach> 
						</ul>												
						<ul class="txts"> 
							<c:forEach items="${allfoods}" var="food" begin="24" end="27">      
       							<li>      
        							<a>${food.name}</a>    <!--url为obj的一个属性-->  
       							</li>
       						</c:forEach>                														
						</ul>												
						<ul class="pics">
							<c:forEach items="${allfoods}" var="food" begin="28" end="31">
								<li style="background-image: url('${food.img}');background-size: 100%"></li>
							</c:forEach> 
						</ul>												
						<ul class="txts"> 
							<c:forEach items="${allfoods}" var="food" begin="28" end="31">      
       							<li>      
        							<a>${food.name}</a>    <!--url为obj的一个属性-->  
       							</li>
       						</c:forEach>                														
						</ul>
					</div>
					<div id="dvsu" style="display: none;">
						<ul class="pics">
							<c:forEach items="${allfoods}" var="food" begin="32" end="35">
								<li style="background-image: url('${food.img}');background-size: 100%"></li>
							</c:forEach> 
						</ul>												
						<ul class="txts"> 
							<c:forEach items="${allfoods}" var="food" begin="32" end="35">      
       							<li>      
        							<a>${food.name}</a>    <!--url为obj的一个属性-->  
       							</li>
       						</c:forEach>                														
						</ul>												
						<ul class="pics">
							<c:forEach items="${allfoods}" var="food" begin="36" end="39">
								<li style="background-image: url('${food.img}');background-size: 100%"></li>
							</c:forEach> 
						</ul>												
						<ul class="txts"> 
							<c:forEach items="${allfoods}" var="food" begin="36" end="39">      
       							<li>      
        							<a>${food.name}</a>    <!--url为obj的一个属性-->  
       							</li>
       						</c:forEach>                														
						</ul>
					</div>
					<div id="dvzhe" style="display: none;">
						<ul class="pics">
							<c:forEach items="${allfoods}" var="food" begin="40" end="43">
								<li style="background-image: url('${food.img}');background-size: 100%"></li>
							</c:forEach> 
						</ul>												
						<ul class="txts"> 
							<c:forEach items="${allfoods}" var="food" begin="40" end="43">      
       							<li>      
        							<a>${food.name}</a>    <!--url为obj的一个属性-->  
       							</li>
       						</c:forEach>                														
						</ul>												
						<ul class="pics">
							<c:forEach items="${allfoods}" var="food" begin="44" end="47">
								<li style="background-image: url('${food.img}');background-size: 100%"></li>
							</c:forEach> 
						</ul>												
						<ul class="txts"> 
							<c:forEach items="${allfoods}" var="food" begin="44" end="47">      
       							<li>      
        							<a>${food.name}</a>    <!--url为obj的一个属性-->  
       							</li>
       						</c:forEach>                														
						</ul>
					</div>
					<div id="dvlu" style="display: none;">
						<ul class="pics">
							<c:forEach items="${allfoods}" var="food" begin="48" end="51">
								<li style="background-image: url('${food.img}');background-size: 100%"></li>
							</c:forEach> 
						</ul>												
						<ul class="txts"> 
							<c:forEach items="${allfoods}" var="food" begin="48" end="51">      
       							<li>      
        							<a>${food.name}</a>    <!--url为obj的一个属性-->  
       							</li>
       						</c:forEach>                														
						</ul>												
						<ul class="pics">
							<c:forEach items="${allfoods}" var="food" begin="52" end="55">
								<li style="background-image: url('${food.img}');background-size: 100%"></li>
							</c:forEach> 
						</ul>												
						<ul class="txts"> 
							<c:forEach items="${allfoods}" var="food" begin="52" end="55">      
       							<li>      
        							<a>${food.name}</a>    <!--url为obj的一个属性-->  
       							</li>
       						</c:forEach>                														
						</ul>
					</div>
					<div id="dvmin" style="display: none;">
						<ul class="pics">
							<c:forEach items="${allfoods}" var="food" begin="56" end="59">
								<li style="background-image: url('${food.img}');background-size: 100%"></li>
							</c:forEach> 
						</ul>												
						<ul class="txts"> 
							<c:forEach items="${allfoods}" var="food" begin="56" end="59">      
       							<li>      
        							<a>${food.name}</a>    <!--url为obj的一个属性-->  
       							</li>
       						</c:forEach>                														
						</ul>												
						<ul class="pics">
							<c:forEach items="${allfoods}" var="food" begin="60" end="63">
								<li style="background-image: url('${food.img}');background-size: 100%"></li>
							</c:forEach> 
						</ul>												
						<ul class="txts"> 
							<c:forEach items="${allfoods}" var="food" begin="60" end="63">      
       							<li>      
        							<a>${food.name}</a>    <!--url为obj的一个属性-->  
       							</li>
       						</c:forEach>                														
						</ul>
					</div>
				</div>
				<script type="text/javascript">
					var dvyue = document.getElementById("dvyue");
					var dvchuan = document.getElementById("dvchuan");
					var dvxiang = document.getElementById("dvxiang");
					var dvhui = document.getElementById("dvhui");
					var dvsu = document.getElementById("dvsu");
					var dvzhe = document.getElementById("dvzhe");
					var dvlu = document.getElementById("dvlu");
					var dvmin = document.getElementById("dvmin");

					var btnyue = document.getElementById("btnyue");
					var btnchuan = document.getElementById("btnchuan");
					var btnxiang = document.getElementById("btnxiang");
					var btnhui = document.getElementById("btnhui");
					var btnsu = document.getElementById("btnsu");
					var btnzhe = document.getElementById("btnzhe");
					var btnlu = document.getElementById("btnlu");
					var btnmin = document.getElementById("btnmin");

					btnyue.onclick = function() {
						dvyue.style.display = "block";
						dvchuan.style.display = "none";
						dvxiang.style.display = "none";
						dvhui.style.display = "none";
						dvsu.style.display = "none";
						dvzhe.style.display = "none";
						dvlu.style.display = "none";
						dvmin.style.display = "none";
					}
					btnchuan.onclick = function() {
						dvchuan.style.display = "block";
						dvyue.style.display = "none";
						dvxiang.style.display = "none";
						dvhui.style.display = "none";
						dvsu.style.display = "none";
						dvzhe.style.display = "none";
						dvlu.style.display = "none";
						dvmin.style.display = "none";
					}
					btnxiang.onclick = function() {
						dvxiang.style.display = "block";
						dvchuan.style.display = "none";
						dvyue.style.display = "none";
						dvhui.style.display = "none";
						dvsu.style.display = "none";
						dvzhe.style.display = "none";
						dvlu.style.display = "none";
						dvmin.style.display = "none";
					}
					btnhui.onclick = function() {
						dvyue.style.display = "none";
						dvchuan.style.display = "none";
						dvxiang.style.display = "none";
						dvhui.style.display = "block";
						dvsu.style.display = "none";
						dvzhe.style.display = "none";
						dvlu.style.display = "none";
						dvmin.style.display = "none";
					}
					btnzhe.onclick = function() {
						dvyue.style.display = "none";
						dvchuan.style.display = "none";
						dvxiang.style.display = "none";
						dvhui.style.display = "none";
						dvsu.style.display = "none";
						dvzhe.style.display = "block";
						dvlu.style.display = "none";
						dvmin.style.display = "none";
					}
					btnsu.onclick = function() {
						dvyue.style.display = "none";
						dvchuan.style.display = "none";
						dvxiang.style.display = "none";
						dvhui.style.display = "none";
						dvsu.style.display = "block";
						dvzhe.style.display = "none";
						dvlu.style.display = "none";
						dvmin.style.display = "none";

					}
					btnlu.onclick = function() {
						dvyue.style.display = "none";
						dvchuan.style.display = "none";
						dvxiang.style.display = "none";
						dvhui.style.display = "none";
						dvsu.style.display = "none";
						dvzhe.style.display = "none";
						dvlu.style.display = "block";
						dvmin.style.display = "none";
					}
					btnmin.onclick = function() {
						dvyue.style.display = "none";
						dvchuan.style.display = "none";
						dvxiang.style.display = "none";
						dvhui.style.display = "none";
						dvsu.style.display = "none";
						dvzhe.style.display = "none";
						dvlu.style.display = "none";
						dvmin.style.display = "block";
					}
				</script>
			</div>
		</div>
		
		<!-- 回到顶部 -->
		<div class="totop">
			<a href="#header"></a>
		</div>
		
		<!-- 底部版权 -->
		<div class="copyright">
			<span id="hr"></span>
			<div class="lianjie">
				<span id="youq">
					友情链接：
					<a href="https://www.meishichina.com/" target="_blank">美食天下</a>
					<a href="http://www.mszx001.com/" target="_blank">美食在线</a>
					<a href="https://www.meishic.com/" target="_blank">美食城</a>
				</span>
			</div>
			<div class="cop">
				版权所有&nbsp;&nbsp;&copy;&nbsp;&nbsp;2021-2021&nbsp;&nbsp;
				<a href="#">中国八大菜系</a>&nbsp;&nbsp;保留所有权利
			</div>
			<div class="erweima">
				<div class="kehuduan"></div>
				<div class="gongzhonghao"></div>
				<div class="etxt">
					<span id="kt">客户端</span>
					<span id="gt">微信公众号</span>
				</div>
			</div>
		</div>

	</body>

</html>